<template>
    <!-- 直播详情页 -->
    <div id="live_container">
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
        <!-- 放大图片 -->
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
        <!-- 放大图片 -->
        <div class="my-video-window">
            <div id="my_video_window_top">
               <!-- <div class="fixedTop" v-show="layerDisplay">
                    <sharecarousel swiperid="go_live" @change="getState" :wakeup-param="callApp"></sharecarousel>
                </div>-->
                <!--<div class="takeup" v-show="layerDisplay"></div>-->

                <div id="my_video_container2" v-show="(livestatus==1||(livestatus==3&&livedata.liveType==6))&&livedata.isRecord!=4">
                    <!-- 即将开始 -->
                    <!-- 已经结束的监控直播 -->
                    <div id="my_video_forecast">
                        <img class="my-video-snapshot" v-if="livedata.stills" :src="livedata.stills"/>
                        <img class="my-video-snapshot" v-else src="../../assets/images/live_default.png"/>
                        <div id="my_video_snapshot_mask">
                            <div id="mask_timer">
                                <img src="../../assets/images/clock.png" v-if="remain>0"/>&nbsp;
                                <span v-if="livestatus==1&&livedata.startTime&&remain>0">
                            {{timerParam.day}}<span class="timer_small">天</span>
                            {{timerParam.hour}}<span class="timer_small">时</span>
                            {{timerParam.minute}}<span class="timer_small">分</span>
                            {{timerParam.second}}<span class="timer_small">秒</span>
                        </span>
                                <span v-if="(livestatus==1&&!livedata.startTime)||(remain<0)">直播未开始</span>
                                <span v-if="livestatus==3&&livedata.liveType==6">直播已结束</span>
                            </div>
                            <div id="mask_btn" @click="wakeupApp()">打开扬帆APP预约</div>
                        </div>
                    </div>
                    <!--<video id="my_video" :src="beginplayurl.split(',')[0]"-->
                    <!--:poster="livedata && livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/414'"-->
                    <!--controls="controls" height="100%" width="100%" v-if="livedata">-->
                    <!--</video>-->
                </div>
                <div id="my_video_container" v-show="livestatus==2||(livestatus==3&&livedata.liveType!=6)||livedata.isRecord==4">
                    <video  class="video-js vjs-big-play-centered" id="video_" x5-playsinline="true" webkit-playsinline="true" playsinline="true" controls controlsList="nodownload">
                    </video>
                </div>
                <!--多流直播-->
                <multithread v-if="!isSingle&&livedata.liveType!=1" :info="livedata.videoList" :status="livedata.status"
                             @change="switchVideo"></multithread>
                <!--关联直播-->
                <multithread2 v-if="!isSingle&&livedata.liveType==1" :info="relation.rows"  @change="switchVideo2"></multithread2>
                <!--<div id="democon"></div>-->
                <tabbar @change="getVal" :vnum="livedata.viewCount" :menusrule="menusrule"></tabbar>
                <!--<div class="clearBoth"></div>-->
            </div>
        </div>

        <div class="my-video-window">
            <div id="my_video_window_bottom">
                <div id="live_play_container" v-show="this.selected=='play'" v-if="livedata && hasadd && hasadd[0]">
                    <!-- 直播信息 -->
                    <div class="live-title">
                        {{livedata.programName}}
                        <span class="show-label live-label-prev" v-if="livedata.status==1">
                            <img src="../../assets/images/live_preview.png"/></span>
                        <span class="show-label live-label-now" v-if="livedata.status==2">
                            <img src="../../assets/images/live_onlive.png"/></span>
                        <span class="show-label live-label-next" v-if="livedata.status==3">
                            <img src="../../assets/images/live_review.png"/></span>
                    </div>
                    <author4 :channelInfo="channelInfo" :info="livedata"></author4>
                    <div class="live-content">
                        {{livedata.programDesc}}
                    </div>
                </div>
                <div id="live_chat_container" v-show="this.selected=='chat'" v-if="hasadd[1]">
                    <!-- 边看边聊 -->
                    <remarknew v-if="usecomtype==2" :topicid="livedata.topicid" :reportData="commentReportData"
                               @change3="getCounter" :comtype="'chat'" :isRealtime="isRealtime"  :wakeupParam="callApp"></remarknew>
                    <!-- 新评论有topicid字段 -->
                    <remarkold v-if="usecomtype==1" :params="paramValue" :reportData="commentReportData"
                               @change2="getCounter"></remarkold>
                    <div class="edit-takeup"></div>
                </div>

                <div id="live_hall_container" v-if="hasadd[2]" v-show="this.selected=='hall'">
                    <!-- 直播厅 -->
                    <liveroom :topicid="thetopicid" @imgSrc="getImg"></liveroom>
                </div>
            </div>
        </div>
        <div class="fixedBottom" v-show="layerDisplay" :class="{'qmp':judgeBigScreen()}">
            <sharecarousel swiperid="go_live" @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    let player;
    var arr={};
    export default {
        components: {
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
            Sharecarousel: function (resolve) {
                require(['../../components/share_carousel.vue'], resolve);
            },
            Banner: function (resolve) {
                require(['../../components/banner.vue'], resolve);
            },
            Tabbar: function (resolve) {
                require(['../../components/tabbar.vue'], resolve);
            },
            author4: function (resolve) {
                require(['../../components/author4.vue'], resolve);
            },
            'big-img': function (resolve) {
                require(['../../components/BigImg.vue'], resolve);
            },
            Multithread: function (resolve) {
                require(['../../components/multi_thread.vue'], resolve);
            },
            Multithread2: function (resolve) {
                require(['../../components/multi_thread2.vue'], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new_2.vue"], resolve);
            },
            Remarkold: function (resolve) {
                require(["../../components/remark_old.vue"], resolve);
            },
            Liveroom: function (resolve) {
                require(["../../components/LiveRoom.vue"], resolve);
            }
        },
        data: function () {
            return {
                jhb_info:{
                    contentId:this.$route.params.programid,
                    contentType:2,
                    channelid:this.$route.params.channelid
                },
                outurl:"",//圈子直播厅地址
                usecomtype: 0,//评论使用新旧系统1:旧 2:新
                isRealtime: true,
                selected: "play", /* 当前选中标签 */
                livedata: {},
                remarkNum: 0,
                remarkData: [],
                halldata: {},
                channelInfo: {},
                thetopicid: "",
                channelid: "",
                pid: "",
                hasadd: [true, false, false],
                showImg: false,
                imgSrc: '',
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                beginplayurl: "",
                callApp: {
                    contentType: 1,
                    contentParam: this.$route.params.programid
                },
                paramValue: {
                    businessType: "program",
                    activityId: this.$route.params.channelid,   // 177555
                    roleType: "0",
                    programId: this.$route.params.programid,    // 40288db463f2ba5e0163f713841302aa
                    preChatId: "0"
                },

                // time: 1,    // 需要上报的时间参数
                // timer: {},  // 计时器函数对象,

                commentReportData: {},   // 评论需要上报的数据,

                sTime: 0,   // 计时器，用于记录用户播放行为的时间
                isCounter: true,    // 是否启用计时器
                isSingle: true,     //是否单流直播

                timerParam: {
                    day: "0",
                    hour: "00",
                    minute: "00",
                    second: "00"
                },// 计时器的参数
                livestatus: 2,
                remain: 0,
                menusrule: {
                    ishall: false,
                    iscom: false
                },
                relation:{},


            }
        },
        mounted: function () {
            let that = this;
            // 获取直播信息
            let liveUrl = interbaseUrl + "setsail/external/externalService?";
            let paramV = {
                service: "getProgramDetail",
                params: JSON.stringify({
                    programId: this.$route.params.programid
                })   // 40288db463f2ba5e0163f713841302aa
                ,
                apiVersion: process.env.VUE_APP_SERVER_VER
            };
            this.axios.get(liveUrl + qs.stringify(paramV)).then((response) => {
                //404
                if (response.data.state == 2016){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                this.livedata = response.data.data;
                arr= JSON.parse(JSON.stringify(response.data.data));
                this.livedata.buildTime = this.livedata.startTime;
                this.livedata.hidePv = true;
//                console.log("**************************");
               // console.log(JSON.stringify(this.livedata, undefined, 2));
//                console.log("**************************");
                this.livestatus = this.livedata.status;
                // 启动计时器
                if (that.livedata.startTime) {
                    beginTimer();
                }

                function beginTimer() {
                    let year = that.livedata.startTime.substr(0, 4);
                    let month = that.livedata.startTime.substr(4, 2);
                    let day = that.livedata.startTime.substr(6, 2);
                    let hour = that.livedata.startTime.substr(8, 2);
                    let minute = that.livedata.startTime.substr(10, 2);
                    let second = that.livedata.startTime.substr(12, 2);
                    let timeStamp = Math.round(new Date((year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second).replace(/-/g, '/')).getTime()/ 1000);
                    let nowTs = Math.round(new Date().getTime() / 1000);
                    let remain = timeStamp - nowTs;
                    that.remain = remain;
                    that.timerParam.day = Math.floor(remain / 86400) + "";
                    remain = remain % 86400;
                    that.timerParam.hour = Math.floor(remain / 3600);
                    remain = remain % 3600;
                    that.timerParam.minute = Math.floor(remain / 60);
                    remain = remain % 60;
                    that.timerParam.second = remain;

                    let formatArr = ["hour", "minute", "second"];
                    for (var key in formatArr) {
                        if (that.timerParam[formatArr[key]] < 10) {
                            that.timerParam[formatArr[key]] = "0" + that.timerParam[formatArr[key]];
                        } else {
                            that.timerParam[formatArr[key]] = that.timerParam[formatArr[key]] + "";
                        }
                    }

                    // 循环执行
                    setTimeout(function () {
                        beginTimer();
                    }, 1000);
                }

                //判断是否单流直播,以及是否有边看边聊和直播厅和
                for (let i = 0; i < response.data.data.menus.length; i++) {
                    if (response.data.data.menus[i].menuType == "1" ) {
                        that.isSingle = false;
                    }
                    if ( response.data.data.menus[i].menuType == "7") {
                        that.menusrule.ishall = true;
                    }
                    if (response.data.data.menus[i].menuType == "2") {
                        that.menusrule.iscom = true;
                    }
                }
                //关联直播
                if (!that.isSingle&&response.data.data.liveType==1){
                    that.axios.get(interbaseUrl + "setsail/external/externalService?"
                        + qs.stringify({
                            service: "getAssociatedProgramList",
                            params: JSON.stringify({
                                programId: this.$route.params.programid
                            })   // 40288db463f2ba5e0163f713841302aa
                            ,
                            apiVersion: process.env.VUE_APP_SERVER_VER
                        })).then((response2) => {
                            that.relation=response2.data.data;
                            console.log(JSON.stringify(arr,undefined,2));
                        that.relation.rows.unshift(arr);

                    });
                }

                // 高度自动调整
                let pageHeight = document.documentElement.clientHeight;
                let pageWidth = document.documentElement.clientWidth;

                let elm = $("#my_video_window_top");
                let videoHeight = pageWidth * 0.5625 + 44 + 5;
                if (!this.isSingle) {
                    videoHeight = videoHeight + 101;
                }

                elm.parent(".my-video-window").height(videoHeight);

                let elm2 = $("#my_video_window_bottom");
                let infoHeight = pageHeight - videoHeight;
                elm2.height(infoHeight - 25.6).parent(".my-video-window").height(infoHeight);
                //end

                if (this.livedata.videoList && this.livedata.videoList.length > 0) {
                    this.beginplayurl = this.livedata.videoList[0].playUrl ? this.livedata.videoList[0].playUrl : "";
                } else {
                    this.beginplayurl = this.livedata.mainPlayUrl ? this.livedata.mainPlayUrl : "";
                }
                // console.log(this.livedata.mainPlayUrl);

                // 使用新播放器：已开始的直播 或 已结束的非监控直播
                if (that.livedata.status == 2 || (that.livedata.status == 3 && that.livedata.liveType != 6)) {
                    console.log("video")
                    // 非预告的情形：加载播放器
                     player = videojs('video_', {
                        muted: false,	//是否静音
                        controls: true, //是否显示控制条
                        autoplay: false, //自动播放
                        poster: that.livedata ? that.livedata.videoList[0].stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",//视频播放前剧照封面图
                        sources: [{
                            src: that.getHlsUrl(that.beginplayurl) ? that.getHlsUrl(that.beginplayurl) : "",
                        }],//播放源
                    });

                }
                if (this.livedata.shareContent == "" || "上【扬帆】客户端参与互动交流") {
                    this.livedata.shareContent = "非常有料的直播，已经有" + this.simpleNum(this.livedata.viewCount) + "人观看，千万不要错过哦~"
                }
                // 修改页面信息
                let meta = {
                    title: this.livedata.shareTitle,
                    content: this.livedata.shareContent,
                    name: this.livedata.programName
                };
                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(this.livedata.shareTitle);

                function doAccessprogram() {
                    let actionType = "accessprogram";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "tagid": "",
                        "contentid": that.$route.params.programid,
                        "imei": "",
                        "extendtag": "",
                        "type": "programme_2",
                        "contenttype": "programme",
                        "opertime": that.toFullTime(),
                        "contentname": that.livedata.programName,
                        "channelid": that.$route.params.channelid,
                        "sharetype": "",

                    };
                    shareUrlReport(behaviorData, actionType);
                }

                doAccessprogram();
                // console.log(JSON.stringify(that.channelInfo));
                // 二次分享+统计用户的share行为
                window.initShareConfig = initShareConf(
                    that.livedata.shareTitle,
                    that.livedata.shareContent,
                    that.livedata.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        opertime: that.toFullTime(),
                        imei: "",
                        openid: "",
                        ip: "",
                        channelid: that.$route.params.channelid,
                        contentid: that.$route.params.programid,
                        name: that.livedata.programName,
                        contenttype: "programme",
                        type: "programme_2",
                        tagid: "",
                        extendtag: "",
                        sharetype: "weixin",
                        shareurl: window.location.href
                    }
                );

                // 调整页面样式
                let multiThreadNum = this.livedata.videoList.length;
                // console.log(multiThreadNum);
                $(".multi-thread-component-list").css({
                    width: 115 * multiThreadNum + "px"
                });

                // 评论comment行为
                this.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: "",
                    contentid: this.$route.params.programid,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: this.livedata.programName,
                    extendtag: "",
                    type: "programme_2",
                    contenttype: "programme",
                    opertime: that.toFullTime(),
                    channelid: this.$route.params.channelid
                };
                // console.log(JSON.stringify(this.commentReportData, undefined, 2));

                this.thetopicid = response.data.data.liveRoomTopicid;
                // console.log("**************************");
                // console.log(this.thetopicid);
                // console.log("**************************");

                if (that.livedata.status == 2 || (that.livedata.status == 3 && that.livedata.liveType != 6)) {
                    setTimeout(function(){
                        // 监听播放事件：获取对象
                        let media = document.getElementsByTagName("video")[0];
                        console.log(media);

                        // 触发计时器
                        let goTimer = function () {

                            if (that.isCounter) {
                                that.sTime = Math.round(new Date().getTime() / 1000);   // 获取当前时间戳
                                that.isCounter = false;
                                doPlay();
                            }
                        };
                        media.addEventListener("play", goTimer);

                        // 触发观看视频play行为
                        function doPlay() {
                            let actionType = "play";
                            let behaviorData = {
                                uid: "",
                                username: "",
                                ip: "",
                                openid: "",
                                contentid: that.$route.params.programid,
//                          playurl: that.livedata.videoList[0].playUrl,
                                playurl: that.getHlsUrl(that.beginplayurl),
                                imei: "",
                                name: that.livedata.programName,
                                extendtag: "",
                                contenttype: "programme",
                                type: "programme_2",
                                opertime: that.toFullTime(),
                                channelid: that.$route.params.channelid
                            };
                            console.log(behaviorData);
                            shareUrlReport(behaviorData, actionType);
                        }
                    },500)


                }

                this.axios.get(
                    /*"https://yfhefei.butel.com:44335/setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}"*/
                    interbaseUrl
                    + "setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}")
                    .then((response) => {
                        let oldCommentLink = response.data.data.rows[0].value;
                        if (oldCommentLink == "true") {
                            that.usecomtype = 1;
                        } else if (oldCommentLink == "false" &&
                            (that.livedata.topicid == ""
                                || typeof(that.livedata.topicid) == "undefined"
                                || that.livedata.topicid == null)) {
                            that.usecomtype = 1;
                        }
                        if(oldCommentLink == "false" &&
                            !(that.livedata.topicid == "")
                                && !(typeof(that.livedata.topicid) == "undefined")
                                && !(that.livedata.topicid == null)){
                            that.usecomtype = 2;
                        }

                    //    alert("oldCommentLink:"+oldCommentLink+";usecomtype:"+that.usecomtype);
                    });
            });

            // 获取频道信息
            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                qs.stringify({
                    "params": JSON.stringify({"channelId": this.$route.params.channelid}),
                    "apiVersion": process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                // 404重定向
                /*if (response.data.state === 2012){
                 this.$router.push("/yf/Dnf");}*/

                this.channelInfo = response.data.data;
                // console.log("++++++++++++++++++++");
                //console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("++++++++++++++++++++");





            });
        },
        beforeDestroy: function () {
            let that = this;
            player.dispose();
            // 播放时长duration行为
            let playTime = Math.round(new Date().getTime() / 1000) - that.sTime;

            function doDuration() {
                let actionType = "duration";
                let behaviorData = {
                    uid: "",
                    username: "",
                    imei: "",
                    ip: "",
                    openid: "",
                    opertime: that.toFullTime(),
                    channelid: that.$route.params.channelid,
                    contentid: that.$route.params.programid,
                    name: that.livedata.programName,
                    playurl: window.location.href,
                    playtime: playTime,
                    // playurl: that.livedata.videoList[0].playUrl,
                    // playtime: that.livedata.videoList[0].duration,
                    contenttype: "programme",
                    type: "programme_2",
                    extendtag: "",
                    tagid: ""
                };
                // console.log(behaviorData);
                shareUrlReport(behaviorData, actionType);
                clearTimeout(that.timer);
            }

            doDuration();
        },
        methods: {
            // 唤醒APP功能
            wakeupApp: function () {
                openDownPage(this.callApp.contentType, this.callApp.contentParam);
            },

            getCounter: function (val) {
                this.remarkNum = val;
            },
            hallhasdone() {
                this.halladd = true;

            },
            getImg:function(e){
                this.imgSrc=e;
                this.showImg=true;
            },
            viewImg() {
                this.showImg = false;
            },
            getVal: function (val) {
                /*  var that=this;
                 that.$http({
                 method:'GET',
                 url:''
                 }).then(function(response){  //接口返回数据
                 if(response.state==1000){
                 this.livedata=response.data;
                 console.log(this.livedata);
                 }
                 },function(error){
                 });*/
                this.selected = val;
                if (val == "play") {
                    this.hasadd[0] = true;
                } else if (val == "chat") {
                    this.hasadd[1] = true;
                } else if (val == "hall") {
                    this.hasadd[2] = true;
                }
            },
            getState: function (bol) {
                this.layerDisplay = bol;
                // console.log("ancestor:" + this.layerDisplay);
            },

            switchVideo: function (item) {
                let that = this;
                this.livedata.interactiveNumber = item.interactiveNumber;
                //this.livedata.programName = item.liveName;
                this.livedata.id = item.programVideoId;
                this.livedata.stills = item.stills;
                this.beginplayurl = item.playUrl ? item.playUrl : "";
                this.livedata.isRecord=item.isRecord;
                // 使用新播放器
                if (!item.playUrl) {
                    this.livestatus = 1;
                    player.poster(that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png");
                    player.src("");
/*
                    dp = new DPlayer({
                        container: document.getElementById("my_video_container"),
//                    screenshot: true,
                        autoplay: false,
                        live: that.livedata.status == 2,
                        video: {
                            url: "",
                            pic: that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",
                            thumbnails: ""
                        },
                    });*/
                } else {
                    this.livestatus = this.livedata.status;
                    player.poster(that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png");
                    player.src( that.beginplayurl ? that.getHlsUrl(that.beginplayurl) : "");

                 /*   dp = new DPlayer({
                        container: document.getElementById("my_video_container"),
//                    screenshot: true,
                        autoplay: false,
                        live: that.livedata.status == 2,
                        video: {
                            url: that.beginplayurl ? that.getHlsUrl(that.beginplayurl) : "",
                            pic: that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png",
                            thumbnails: that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png"
                        },
                    });*/
                }
                //  console.log(this.livestatus)


                // console.log("++++++++++++++++++++++++");
                // console.log(JSON.stringify(item, undefined, 2));
                // console.log(JSON.stringify(this.livedata, undefined, 2));
                // console.log("++++++++++++++++++++++++");
            },
            switchVideo2: function (item) {
                let that = this;
                this.livedata.interactiveNumber = item.interactiveNumber;
                //this.livedata.programName = item.liveName;
                this.livedata.id = item.id;
                this.livedata.stills = item.stills;
                this.beginplayurl = item.videoList[0].playUrl ? item.videoList[0].playUrl : "";
                this.livedata.isRecord=item.videoList[0].isRecord;
                console.log(JSON.stringify(arr,undefined,2));
                console.log(JSON.stringify(that.relation,undefined,2));
                // 使用新播放器
                if (this.beginplayurl=="") {
                    this.livestatus = 1;
                    player.poster(that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png");
                    player.src("");

                } else {
                    player.poster(that.livedata ? that.livedata.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514' : "../../assets/images/live_default.png");
                    player.src( that.beginplayurl ? that.getHlsUrl(that.beginplayurl) : "");

                }

            },

            resetPlayUrl: function (url) {
                let playUrl = [];
                playUrl.push(url.replace("m3u8", "flv"));
                playUrl.push(url);
                playUrl.push(url.replace(".m3u8", "").replace("http", "rtmp"));
                return playUrl.join(",");
            }
        }
    }

</script>

<style>
    #live_container {
    }

    #live_play_container {
    }

    #live_chat_container {
        margin-top: -0.8rem;
    }

    /* 视频链接部分 */
    /*#my_video_container, #my_video_container2 {*/
    /*position: fixed;*/
    /*top: 0;*/
    /*left: 0;*/
    /*}*/
    #my_video_container {
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
    }
#my_video_container video{
    width:100%;
    height:100%;
}
    #my_video_container2 {
        width: 100%;
        position: relative;
        padding-bottom: 56.25%;
    }

    #my_video_forecast {
        width: 100%;
        height: 100%;
    }

    /*#my_video_snapshot_mask_2 {*/
    /*z-index: 10;*/
    /*width: 100%;*/
    /*height: 2.7rem;*/
    /*font-size: 0.9rem;*/
    /*line-height: 2.7rem;*/
    /*text-align: center;*/
    /*background-color: rgba(152, 82, 255, 0.9);*/
    /*position: absolute;*/
    /*!*opacity: 0.9;*!*/
    /*color: #FFF;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*padding: 0 0.6rem;*/
    /*box-sizing: border-box;*/
    /*}*/

    #my_video, .my-video-snapshot {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }

    .my-video-snapshot {
        display: block;
        z-index: 10;
    }

    #my_video_snapshot_mask {
        z-index: 20;
        width: 100%;
        height: 3.0rem;
        font-size: 1.0rem;
        line-height: 3.0rem;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        /*opacity: 0.7;*/
        color: #FFF;
        bottom: 0;
        left: 0;
        padding: 0 0.6rem;
        box-sizing: border-box;
    }

    #mask_timer {
        float: left;
    }

    #mask_timer img {
        width: 1.0rem;
        vertical-align: text-bottom;
    }

    .timer_small {
        font-size: 0.8rem;
    }

    #mask_btn {
        font-size: 0.9rem;
        color: #FFF;
        background-color: #459AF5;
        height: 1.6rem;
        line-height: 1.6rem;
        float: right;
        margin-top: 0.7rem;
        padding: 0 0.6rem;
        border-radius: 1.0rem;
    }

    .show-label img {
        height: 18px;
        position: relative;
        top: 3px;
    }

    .dplayer-video-wrap {
        position: absolute;
    }

    .my-video-window {
        width: 100%;
        position: relative;
        overflow: hidden;

    }

    #my_video_window_top {
        width: 100%;
        /* position: fixed;*/
        top: 0;
        left: 0;
        z-index: 999;
        position: relative;
    }

    #my_video_window_bottom {
        width: 100%;
        padding: 0.6rem;
        box-sizing: border-box;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #live_chat_container .edit-component-container{
        bottom:3.3rem;
    }
    #live_chat_container .edit-takeup{
        height:7.1rem;
    }
    #live_hall_container{padding-bottom: 3.3rem;}
    .qmp .share-carousel-component-container .swiper-container{height:3.9rem;}
    .qmp .share-dark-component-container{height:100%;}
</style>